<link href="../html/css/site.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="font-awesome/css/font-awesome.css">

<script src="js/jquery-1.8.2.min.js" type="text/javascript"></script>

<script type="text/javascript">
  $(function(){


    function getCategories(){
      var URL = 'ajax_get_category.php';
      $.ajax({
        url:URL,
        data:{'username':'admin','password':'1q1q1q'},
        type:'POST',
        dataType:'json',
        beforeSend:function(){ $('#loader').html('<i class="fa fa-spinner fa-2x"></i>'); },

        success:function(data){
          var sel = '<option value="">-Select-</option>';


          $.each(data, function(i,j) {
sel += '<option value="'+i+'">'+j+'</option>';
          //console.log(i);
          //console.log(j);
          })//end each

          //console.log(sel);
$('#sel_category_id').html(sel);
        },
        complete:function(){
          $('#loader').html('');
        },
        error: function(xhr,status,error) { console.log('Error: ' + status) ; }
      });
    }//end of getCategories()

    // Calling Ajax
    getCategories();
  });
</script>


<form action="save_product.php"  enctype="multipart/form-data"  method="post">

  <table border="0" width="80%" align="center"cellspacing ="0">
    <thead>
      <tr>
        <th colspan="2">::Add Product Details::</th>
      </tr>
    </thead>
    <tbody>

      <tr>
        <td align="right">Product Name :</td>
        <td><input type="text" name="name" required value="" /></td>
      </tr>

      <tr>
        <td align="right">Product Image :</td>
        <td><input type="file"  name="image" required value="" /></td>
      </tr>

      <tr>
        <td align="right">Product Category</td>
        <td>

          <select name="category_id" id="sel_category_id" required >
            <option value="">-Select-</option>
          </select>
<span id="loader"></span>
          </td>
      </tr>

      <tr>
        <td align="right">Product Amount :</td>
        <td><input type="text" maxlength="6" required  autocomplete="off" name="amount" value="" /></td>
      </tr>

      <tr>
        <td align="right">&nbsp;</td>
        <td><input type="submit" value="Add Product"> </td>
      </tr>

    </tbody>
  </table>

</form>


